<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>帖子列表</title>
</head>

<style>
    a {
        color: #000000;
        text-decoration: none; /* Remove underline from links */
    }

    a:hover {
        color: #333; /* Darken link color on hover */
    }

    .btn-link {
        display: inline-block;
        padding: 10px 20px;
        background-color: #28a745;
        color: #fff;
        border-radius: 5px;
        text-decoration: none;
    }

    .btn-link:hover {
        background-color: #218838;
    }

    .btn-action {
        display: inline-block;
        width: calc(50% - 50px); /* Each button occupies half of the space minus the border width */
        padding: 10px;
        margin: 0px; /* Adjust margin between buttons */
        border: 1px solid #ffc107; /* Border color as light yellow */
        background-color: #fff3cd; /* Light yellow background */
        color: #000;
        border-radius: 30px;
        text-decoration: none;
        text-align: center; /* Center the text horizontally */
        box-sizing: border-box; /* Include padding and border in the width calculation */
    }

    .btn-action:hover {
        background-color: #ffeeba; /* Darken background color on hover */
    }

    .btn-update {
        position: relative;
        left: 30px; /* Move the "Update" button 10 pixels to the right */
    }

    .btn-delete {
        position: relative;
        right: 30px; /* Move the "Delete" button 10 pixels to the left */
    }

    table {
        width: 100%;
        border-collapse: collapse;
        margin-top: 20px;
    }

    th, td {
        padding: 10px;
        border: 1px solid #dee2e6;
    }

    th {
        background-color: #007bff;
        color: #fff;
    }

    tr:nth-child(even) {
        background-color: #f8f9fa;
    }

    tr:hover {
        background-color: #e2e6ea;
    }
</style>
<body>
<table class="table table-striped table-bordered table-hover text-center">
    <thead>
    <tr style="text-align:center">
        <th>帖子ID</th>
        <th>公司</th>
        <th>岗位</th>
        <th>城市</th>
        <th>评论</th>
        <th>操作</th>
    </tr>
    </thead>
    <tbody>
    <tr th:each="offer:${offerData}">
        <td th:text="${offer.id}"></td>
        <td th:text="${offer.company}"></td>
        <td th:text="${offer.job}"></td>
        <td th:text="${offer.city}"></td>
        <td th:text="${offer.comment}"></td>
        <td>
            <div style="display: flex; justify-content: space-between;">
                <a class="btn-action btn-update" th:href="@{'/api/updateofferdata/'+${offer.id}}">更改</a>
                <a class="btn-action btn-delete" th:href="@{'/api/deleteofferdata/'+${offer.id}}">删除</a>
            </div>
        </td>
    </tr>
    </tbody>
</table>
</body>
</html>
